<template>
  <div>
    <div class="fixed-avatar" @click="dropdownVisible = !dropdownVisible">
      <img :src="avatarUrl" alt="Avatar">
      <el-menu v-show="dropdownVisible" class="avatar-dropdown-menu" background-color="#fff" text-color="#333" active-text-color="#409EFF" @select="handleMenuSelect">
        <el-menu-item class="menu-item" index="profile">个人信息</el-menu-item>
        <el-menu-item class="menu-item" index="report">报告</el-menu-item>
        <el-menu-item class="menu-item" index="logout">登出</el-menu-item>
      </el-menu>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="50%" @close="dialogVisible = false">
      <div class="profile-info">
        <div class="avatar-upload">
          <img :src="avatarUrl" alt="Avatar">
          <el-upload class="avatar-uploader" action="/upload/avatar" accept=".jpg, .jpeg, .png" :show-file-list="false" :on-success="handleAvatarUploadSuccess" :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary">上传头像</el-button>
          </el-upload>
        </div>
        <div class="profile-details">
          <p><strong>警号:</strong> {{ uid }}</p>
          <p><strong>姓名:</strong> {{ name }}</p>
          <p><strong>邮箱:</strong> {{ email }}</p>
          <p><strong>所属单位:</strong> {{ organization }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: 'logo.jpg',
      dropdownVisible: false,
      dialogVisible: false,
      uid: '',
      name: '',
      email: sessionStorage.getItem('userInfo'),
      organization: ''
    }
  },
  mounted() {
    this.fetchProfileInfo()
  },
  methods: {
    async fetchProfileInfo() {
      this.axios.get('/api/profile/info', { params: { email: this.email }})
        .then(async(response) => {
          this.uid = response.data.uid
          this.name = response.data.name
          this.organization = response.data.organization
          if (response.data.avatarUrl) {
            this.avatarUrl = response.data.avatarUrl
          }
        }).catch((error) => {
          console.error('Error fetching profile info:', error)
        })
    },
    handleAvatarUploadSuccess(response, file, fileList) {
      if (response.data.avatarUrl) { this.avatarUrl = response.avatarUrl } else this.avatarUrl = 'logo.jpg'
    },
    beforeAvatarUpload(file) {
      return true
    },
    handleMenuSelect(index) {
      this.dropdownVisible = false
      switch (index) {
        case 'profile':
          this.dialogVisible = true
          break
        case 'report':
          this.$router.push('/plcreport')
          break
        case 'logout':
          sessionStorage.clear()
          this.$router.push('/prelogin')
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.fixed-avatar {
  position: fixed;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.fixed-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar-dropdown-menu {
  position: absolute;
  right: 0;
  top: 60px;
  width: 100px;
  z-index: 1000;
  background: rgba(255, 170, 78, 0.7);
  border: 2px solid orange;
}

.menu-item:hover {
  background: rgba(254, 145, 29, 0.7)
}

.avatar-upload img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
